<!-- 教练 – 首页 – 打卡		clock -->
<template>
	<view class="">
		<view class="punch-top">
			<view class="w90 f b c p_t_20">
				<view class=" f b c">
					<image style="width: 96rpx;height: 96rpx;border-radius: 200rpx;" :src="data.img" mode=""></image>
					<view class="f d ml10">
						<text class="fs28 bold">{{data.name}}</text>
						<text class="p_t_20 fs164 hui" v-if="data.type == 1">老板</text>
						<text class="p_t_20 fs164 hui" v-if="data.type == 2">店长</text>
						<text class="p_t_20 fs164 hui" v-if="data.type == 3">教练</text>
						<text class="p_t_20 fs164 hui" v-if="data.type == 4">前台</text>
					</view>
				</view>	
			<!-- 	<view class=" f d c">
					<image style="width:36rpx;height:36rpx;" src="../../static/img/066.png" mode=""></image>
					<text class="fs16 p_t_10">考勤统计</text>
				</view> -->
			</view>
		</view>
		<view class="punch-daka">
			<view class="w95 f b c p_t_20">
				<view class="punch-daka-s " :class="shangban==0?'bol':'col'"  @click="tiaozheng(1)" v-if="data.is_sb == 1">
					<view class="ws90 f b c p_t_10 pl10 pr10" >
						<view>
							<text class="">上班</text>
						</view>
						<view class="" >
							<u-icon name="checkmark" :color="shangban==1?'#1f73f2':'#333333'" size="28"></u-icon>
						</view>
						<view class="">
							<text class="">{{data.sb_time}}已打卡</text>
						</view>
					</view>
				</view>
				<view class="punch-daka-s" :class="shangban==0?'bol':'col'" @click="tiaozheng(1)"  v-else>
					<view class="ws90 f b c p_t_10 pl10 pr10">
						<view>
							<text class="">上班</text>
						</view>
						<view class="">
							<text class="">未打卡</text>
						</view>
					</view>
				</view>
				<view class="punch-daka-s"  :class="xiaban==0?'bol':'col'"  @click="tiaozheng(2)" v-if="data.is_xb == 1">
					<view class="ws90 f b c p_t_10 pl10 pr10" >
						<view>
							<text class="">下班</text>
						</view>
						<view class="">
							<u-icon name="checkmark" :color="xiaban==1?'#1f73f2':'#333333'" size="28"></u-icon>
						</view>
						<view class="">
							<text class="">{{data.xb_time}}已打卡</text>
						</view>
					</view>
				</view>
				<view class="punch-daka-s" :class="xiaban==0?'bol':'col'" @click="tiaozheng(2)"  v-else>
					<view class="ws90 f b c p_t_10 pl10 pr10">
						<view>
							<text class="">下班</text>
						</view>
						<view class="">
							<text class="">未打卡</text>
						</view>
					</view>
				</view>
			</view>
			<view >
				<view class="punch-daka-lan dis-flex flex-align-center flex-center"  v-if="data.is_sb == 0 && shangban == 1"  @click="godaka">
					<view class="fs32 white" >上班打卡</view>
				</view>
				<view class="punch-daka-lan2 dis-flex flex-align-center flex-center" v-if="data.is_sb == 1 && shangban == 1"  >
					<view class="fs32 white">上班已打卡</view>
				</view>
				<view class="punch-daka-lan dis-flex flex-align-center flex-center"  v-if="data.is_xb == 0 && xiaban == 1"  @click="godaka">
					<view class="fs32 white">下班打卡</view>
				</view>
				<view class="punch-daka-lan2 dis-flex flex-align-center flex-center" v-if="data.is_xb == 1 && xiaban == 1"  >
					<view class="fs32 white" >下班已打卡</view>
				</view>
			</view>
		</view>
		<view class="punch-buttom">
			<view class="w90 fs20 p_t_20">
					<rich-text :nodes="data.text"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shangban:1,
				xiaban:0,
				DC: 1, //  0:上课   1:课后
				data:[],
				lat:'',
				lng:''
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '考勤打卡'
			})
			this.init()
		},
		methods: {
			init(){
				var that = this
				this.$http.post(this.$config.UrlPostsignInfo, {}).then((res) => {
					if (res.status == 1) {
						this.data = res.data
					}
				})
			},
			tiaozheng(e) {
				this.DC = e
				if(e == 1){
					this.shangban = 1
					this.xiaban = 0
				}else{
					this.shangban = 0
					this.xiaban = 1
				}
				
				
			},
			godaka(){
				var that = this
				uni.getLocation({
					type: 'wgs84',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						that.lat = res.latitude
						that.lng = res.longitude
						var json = {
							type:that.DC,
							lat:that.lat,
							lng:that.lng
						}
						that.$http.post(that.$config.UrlPostdosign, json).then((res) => {
							if (res.status == 1) {
								that.$api.toast('打卡成功')
								that.init()
							}else{
								that.$api.toast(res.err)
							}
						})
					},
					fail: function(e){
						that.$api.alert("请开启手机定位服务,才能打卡")
					}
				});
				
				
			},
			ao(){
				uni.navigateTo({
					url:"../attendance/attendance"
				})
			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #F6F8FC;
	}
	.col {
		color:#1F73F2;
		background-color:#F1F6FF;
	}
	.bol{
		background: #ececec;
	}
	.punch-top{
		width: 686rpx;
		height: 144rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16);
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka{
		width: 686rpx;
		height: 500rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
	}
	.punch-daka-s{
		width: 300rpx;
		height: 58rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
	}
	.punch-daka-lan{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin:0 auto;
		margin-top:120rpx;
	}
	.punch-daka-lan2{
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #999999;
		border-radius: 50%;
		margin:0 auto;
		margin-top:120rpx;
	}
	.punch-buttom{
		width: 686rpx;
		height: 298rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
		margin-top:24rpx;
		overflow:hidden;
	}
	.punch-buttom-jin{
		width: 120rpx;
		height: 48rpx;
		line-height:48rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 24rpx;
		margin-top:32rpx;
	}
	.landian{
		width: 16rpx;
		height: 16rpx;
		opacity: 1;
		background: #ffffff;
		border: 1rpx solid #1f73f2;
		border-radius: 50%;
	}
	.punch-buttom-boxy{
		width: 502rpx;
		height: 82rpx;
		line-height:82rpx;
		opacity: 1;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding-left:24rpx;
	}
</style>
